<template>
  <a-modal
    title="部门成员管理"
    :width="800"
    :visible="visible"
    :destroyOnClose="true"
    :confirmLoading="confirmLoading"
    @cancel="close"
  >
    <template slot="footer">
      <a-button key="ok" type="primary" @click="handleOk">
        关闭
      </a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <div class="modal-operations">
        <a-button type="primary" icon="plus" @click="handleAddPersonModal()">添加新人员</a-button>
      </div>
      <a-transfer
        showSearch
        :dataSource="orgMembers"
        :titles="['全部人员', '部门人员']"
        :targetKeys="departMembers"
        :selectedKeys="selectedKeys"
        @change="handleChange"
        @selectChange="handleSelectChange"
        @scroll="handleScroll"
        :render="item=>item.title"
        :listStyle="{
          width: '320px',
          height: '350px',
        }"
      />
      <person-modal ref="PersonModal" @ok="handlePersonModalOk" />
    </a-spin>
  </a-modal>
</template>

<script>
import { getOrgMembersByOrgPid, getDepartMembersByDeptPid, addDepartMember, delDepartMember } from '../person'
import PersonModal from './PersonModal'

export default {
  name: 'DepartMembersModal',
  components: {
    PersonModal
  },
  props: {
  },
  data () {
    // const mockData = []
    // for (let i = 0; i < 20; i++) {
    //   mockData.push({
    //     key: i.toString(),
    //     title: `content${i + 1}`,
    //     description: `description of content${i + 1}`,
    //     disabled: i % 3 < 1
    //   })
    // }
    // const oriTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key)
    return {
      orgMembers: [],
      departMembers: [],
      selectedKeys: [], // 选中数组
      visible: false,
      deptPid: '',
      confirmLoading: true
    }
  },
  beforeCreate () {
  },
  created () {
  },
  mounted () {
  },
  methods: {
    filterOption (inputValue, option) {
      console.log(inputValue, option)
    },
    showModal (deptPid) {
      this.visible = true
      this.getOrgMembers()
      this.deptPid = deptPid
      this.getDepartMembers(deptPid)
    },
    // 得到单位下成员
    getOrgMembers () {
      this.orgMembers = []
      getOrgMembersByOrgPid({}, 100000, 1)
        .then(res => {
          if (res.code === 'C1') {
            for (let i = 0; i < res.data.length; i++) {
              let pseronName = '工号:' + res.data[i].rop.empno
              console.log('rme', pseronName)
              if (pseronName === '工号:undefined') {
                pseronName = res.data[i].person.personName
              } else {
                pseronName = pseronName + '  ' + res.data[i].person.personName + ' (' + res.data[i].person.idno + ')'
              }
              const member = {
                key: res.data[i].person.pid,
                title: pseronName
              }
              this.orgMembers.push(member)
            }
          }
        })
      console.log('orgMembers', this.orgMembers)
    },
    // 得到部门下成员
    getDepartMembers (deptPid) {
      this.departMembers = []
      getDepartMembersByDeptPid(deptPid, {}, 10000, 1)
        .then(res => {
          if (res.code === 'C1') {
            for (let i = 0; i < res.data.length; i++) {
              this.departMembers.push(res.data[i].person.pid)
            }
          }
        })
      this.confirmLoading = false
      console.log('departMembers', this.departMembers)
    },
    // 关闭
    close () {
      this.$emit('close')
      this.visible = false
    },
    // 保存
    handleOk () {
      this.close()
    },
    handleCancel () {
      this.visible = false
    },
    // 改变
    handleChange (nextTargetKeys, direction, moveKeys) {
      if (moveKeys.length > 0 && direction === 'right') {
        for (let i = 0; i < moveKeys.length; i++) {
          const departMember = {
            personPid: moveKeys[i],
            deptPid: this.deptPid
          }
          addDepartMember(departMember, {}).then(res => {
            this.departMembers.push(res.data.personPid)
          })
        }
      }
      if (moveKeys.length > 0 && direction === 'left') {
        for (let i = 0; i < moveKeys.length; i++) {
          const departMember = {
            personPid: moveKeys[i],
            deptPid: this.deptPid
          }
          delDepartMember(departMember, {}).then(res => {
            this.orgMembers.push(res.data.personPid)
            this.departMembers = nextTargetKeys
          })
        }
      }
    },
    // 关闭人员新增窗口回调
    handlePersonModalOk () {
      this.getOrgMembers()
      // this.getDepartMembers(this.deptPid)
    },
    // 打开新增人员对话框
    handleAddPersonModal () {
      this.$refs.PersonModal.showModal()
    },
    // 选中列表
    handleSelectChange (sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys]

      // console.log('sourceSelectedKeys: ', sourceSelectedKeys)
      // console.log('targetSelectedKeys: ', targetSelectedKeys)
    },
    handleScroll (direction, e) {
      // console.log('direction:', direction)
      // console.log('target:', e.target)
    },
    handleDisable (disabled) {
      // this.disabled = disabled
    }
  }
}
</script>

<style lang="less">
  .avatar-uploader > .ant-upload {
    width: 200px;
    height: 200px;
  }
  .modal-operations {
    margin-bottom: 16px;
    text-align: left;
  }
  .modal-operations > button {
    margin-left: 10px;
  }
</style>
